$colors: #cccccc, #2fb6e4, #ff4a1a;

.delivery-door {
    height: calc(100% - 74px);
    min-height: calc(100% - 74px);
    :deep {
        .el-table {
            color: #33302d;

            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 14px;
            font-weight: 400;
            .el-button--small {
                color: #33302d;
                border: 1px solid #eaeaea;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 12px;
                font-weight: 400;
            }
            .el-button--small + .el-button--small {
                margin-left: 8px;
            }
        }
        .el-table th.el-table__cell {
            color: #33302d;

            font-family: PingFangSC-Medium, PingFang SC;
            font-size: 14px;
            font-weight: 500;
        }
        .el-table .el-table__cell {
            padding: 20px 0;
        }
        .el-table th.el-table__cell {
            padding: 12px 0;
        }
    }

    &-header {
        height: 48px;
        margin-bottom: 16px;
        padding: 0 24px 24px 24px;

        background: #fff;
        .name {
            margin-right: 12px;

            color: #33302d;

            font-family: PingFangSC-Medium, PingFang SC;
            font-size: 14px;
            font-weight: 500;
        }
        .tip {
            margin-top: 4px;

            color: #666666;

            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 14px;
            font-weight: 400;
        }
    }

    &_bottom {
        box-sizing: border-box;
        min-height: calc(100% - 88px);
        padding: 24px;

        background-color: #fff;
    }
    &-add {
        margin-bottom: 24px;

        text-align: right;
    }
    .zw-form-layout {
        margin-bottom: 24px;

        border: 1px solid #eaeaea;
        background: #f9f9f9;
    }
    .not-started {
        color: #aaa;
    }

    .custom-el-link {
        display: inline;
        :deep .el-link__inner {
            display: inline;
        }
    }

    @for $i from 1 to 4 {
        .custom-status-#{$i} {
            position: relative;

            padding-left: 14px;

            &::before {
                position: absolute;
                top: 50%;
                left: 0;

                width: 8px;
                height: 8px;

                content: '';
                transform: translateY(-50%);

                border-radius: 50%;
                background: nth($colors, $i);
            }
        }
    }
}
